<template>
  <div class="container">
    <div class="box">
      <div class="top" v-if="data">
        <img class="headerPng" src="@/assets/result2.png" alt="" />
        <div class="content">
          <div class="top">
            <div class="item">
              <div class="left">手机号：</div>
              <div class="right">{{ data.tel }}</div>
            </div>
            <div class="item">
              <div class="left">姓&nbsp;&nbsp;&nbsp;名：</div>
              <div class="right">{{ data.name }}</div>
            </div>
          </div>
          <div class="bottom">
            <div class="title">中奖信息</div>
            <template v-if="data.list.length > 0">
              <div class="item" v-for="(v, k) in data.list" :key="k">
                <div class="hr"></div>
                <div class="date">
                  {{moment(v.dateTime).format('YYYY年MM月DD日')}}
                 参与{{
                    v.prizeType
                  }}
                </div>
                <div class="result"  >获得 <span v-html="v.prizeName"></span></div>
                <div class="address">领奖地址：{{ v.address }}</div>
              </div>
            </template>
            <div v-else style="text-align: center">暂无中奖记录</div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无用户信息"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      form: {},
      rules: {},
      tel: "",
      data: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let { data } = await this.axios({
        url: "/api/main/IsUserPrize",
        method: "get",
        params: {
          tel: this.$route.query.tel,
        },
      });
      if (data.Status == 0) {
        this.data = data.UserData;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .box {
    width: 90%;
    margin: 5vh auto 0;
    background: #fff;
    border: 16px solid #231714;
    border-radius: 36px;
    position: relative;
    .headerPng {
      position: absolute;
      width: 50%;
      object-fit: cover;
      left: 25%;
      top: -15%;
      z-index: 99;
    }
    .content {
      padding: 10vh 4vh 10vh;
      .top {
        .item {
          display: flex;
          margin: 2vh 0;
          .left {
            font-family: PingFang SC;
            font-weight: 500;
            color: #231714;
          }
        }
      }

      .bottom {
        .hr {
          width: 100%;
          height: 0;
          border-top: 16px dashed #231714;
          margin: 2vh 0;
        }
        .item {
          text-align: center;

          .date {
            font-family: PingFang SC;
            font-weight: 400;
            color: #231714;
          }
          .result {
            font-weight: 600;
            color: #5de3a2;
            margin: 2vh 0;
            font-size: 108px;
            // -webkit-text-stroke: 3px #231714;
            // text-stroke: 3px #231714;
          }
          .address {
            font-family: PingFang SC;
            font-weight: 400;
            color: #231714;
          }
        }
      }
    }
  }
}
// .top {
//   display: flex;
//   align-items: center;
//   > span {
//     width: 50%;
//   }
// }
.content {
  .title {
    text-align: center;
    color: #ffffff;
    font-size: 108px;
    -webkit-text-stroke: 3px #231714;
    text-stroke: 3px #231714;
  }
}
</style>
